<template>
    <a-button @click="handleClick2">打开对话框</a-button>
      <a-dialog v-model:visible="visible" destroyOnClose title="标题" :height="850" @on-close="onClose" @on-confirm="onConfirm">
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>

        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
        <p>some contents...</p><p>some contents...</p>
      </a-dialog>
      <a-button @click="$modal({
        title: '函数打开 ',
         content: `<div>使用 app.config.globalProperties 全局属性</div><input  />`,
        //  appendToBody:false,
         onConfirm : () => { 
        },
        onCancel : () => {
        }
      })">全局属性打开</a-button>
      <!-- <a-button @click="handleClick3">inject API 打开</a-button> -->
</template>
<script setup>
// const OpenDialog = inject('OPENDIALOG')
const visible=ref(false)
 
const handleClick2= () => {
    visible.value = true
}
// const handleClick3 = () => {
    
//     OpenDialog({
//         title: '函数式打开 ',
//         content: '使用 inject API',
//         onConfirm: () => { 
//             alert('onConfirm')
//         },
//         onCancel: () => {
//             alert('onCancel')
//         },
//     })
// }

const onClose = () => { 
    
}
const onConfirm = () => { 
    
}
</script>